<template>
  <el-aside width="200px" class="aside">
    <div class="aside-list">
      <el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
        @close="handleClose" router>

        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :value="false" v-show="isCollapse">
            <el-icon>
              <Open />
            </el-icon>
          </el-radio-button>
          <el-radio-button :value="true" v-show="!isCollapse">
            <el-icon>
              <RemoveFilled />
            </el-icon>
          </el-radio-button>
        </el-radio-group>

        <el-menu-item index="/main" @click="gotoHome">
          <i class="iconfont icon-guojijiudian" ></i>
          <span>酒店</span>
        </el-menu-item>

        <el-menu-item :index="v.path" v-for="v in router.options.routes[0].children" :key="v.path" @click="handleClick">
          <el-icon>
            <i class="iconfont" :class="v.meat.icon"></i>
          </el-icon>
          <template #title>
            {{ v.meat.title }}
          </template>
        </el-menu-item>

      </el-menu>
    </div>
  </el-aside>
</template>

<script lang="ts" setup>

import { ref } from "vue";
import { Document, Menu as Open, RemoveFilled } from '@element-plus/icons-vue'
import { useRouter } from "vue-router";
import { onMounted } from "vue";
import { useUserView } from "../../store/UserView";
import { storeToRefs } from "pinia";

const router = useRouter();

const isCollapse = ref(false)
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}

onMounted(() => {
  console.log("获取路由规则", router.options.routes[0].children);
})

// Pinia 持久化存储store,判断当前页面是首页还是功能页
const UserView = useUserView();
let { state } = storeToRefs(UserView)
const handleClick = () => {
  if (state.value == false) {
    state.value = !state.value
  }
}

const gotoHome = () =>{
  state.value = false
  console.log(state.value);
  
}
//动态加载不同组件


</script>

<style scoped lang="stylus" rel="stylessheet/stylus">
.el-menu{
  height:100vh
}
.aside{
  width: 200px;

}
.aside-list{
  position :fixed;
  left:0;
  width:200px;
}
i{
  font-size: 24px;
  font-weight: 500;
  margin-right: 5px;
}
.el-radio-button/deep/.el-radio-button__inner{
  border:none;
  font-size: 20px;
  color: #409eff;
}

</style>